<template>

  <div class="login">
    <el-form
      class="container"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      status-icon
    >
      <el-form-item>
        <div class="avatar">
          <img src="@/assets/logo.png" alt="" />
        </div>
      </el-form-item>

      <el-form-item label="用户名" prop="username">
        <!-- <i class="iconfont icon-user"></i> -->
        <!-- 属性的形式 -->
        <el-input v-model="ruleForm.username" prefix-icon="iconfont icon-user">
        </el-input>
      </el-form-item>
      <el-form-item label="密 码" prop="password">
        <!-- <i class="iconfont icon-3702mima"></i> -->
        <el-input v-model="ruleForm.password">
          <!-- 插槽的形式 -->
          <i slot="prefix" class="iconfont icon-3702mima"></i>
        </el-input>
      </el-form-item>

      <el-form-item>
        <!-- @click="submitForm('ruleForm')" -->
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          class="login-btn"
          >立即登录</el-button
        >
        <!-- @click="resetForm('ruleForm')" -->
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 1. 登录页面的布局
// 通过 Element-UI 组件实现布局

// el-form
// el-form-item
// el-input
// el-button
// 字体图标

// import { BaseUrl } from "@/api/config.js";

//  登录请求地址

// http://ludir.cn:8888/api/private/v1/login
// 用户名 admin  
//  密码 123456

export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      ruleForm: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {},
  methods: {
    //基础实现登录基础代码
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     // console.log("valid",valid)  // 如果 valid 为true 那么表示符合上面的验证规则

    //     if (valid) {
    //       const loading = this.$loading({
    //         lock: true,
    //         text: "Loading",
    //         spinner: "el-icon-loading",
    //         background: "rgba(0, 0, 0, 0.7)",
    //       });

    //       this.$http.post(BaseUrl + "login", this.ruleForm).then((res) => {
    //         console.log("login", res.data);

    //         loading.close();
    //       });
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },

    //登录发送请求功能
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        // console.log("valid",valid)  // 如果 valid 为true 那么表示符合上面的验证规则
        if (!valid) return this.$message.error("用户名或者密码不对");

        // 用户名与密码符合验证规则
        this.getLoading(); //打开

        // ①	通过 axios 调用登录验证接口
        // ②	登录成功之后保持用户 token 信息
        // ③	跳转到项目主页
        try {
          // ①	通过 axios 调用登录验证接口
          var res = await this.$http.post("login", this.ruleForm);
         
          if (res) {
            this.getLoading().close(); //关闭
            // console.log("login", res.data.data);
            var { status, msg } = res.data.meta;

            if (status !== 200) {
              return this.$message.error(msg);
            }
            //表示请求数据成功
            // ②	登录成功之后保持用户 token 信息
            var token = res.data.data.token;
            window.sessionStorage.setItem("token", token);

            // ③	跳转到项目主页
            this.$router.push("/home");
          }
        } catch (error) {
          console.log(error);
        }
      });
    },

    //重置功能
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //封装一个loading 正在请求的方法
    getLoading() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      return loading;
    },
  },
};
</script>

<style scoped  lang="less">
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #2f4050;

  .container {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    padding: 0px 40px 15px 40px;
    margin: 200px auto;
    background: white;
    .avatar {
      position: relative;
      left: 50%;
      width: 120px;
      height: 120px;
      margin-left: -60px;
      margin-top: -60px;
      box-sizing: border-box;
      border-radius: 50%;
      border: 10px solid #fff;
      box-shadow: 0 1px 5px #ccc;
      overflow: hidden;
    }
    .login-btn {
      // width: 100%;
    }
  }
}
</style>
